<template>
	<!-- 退款详情 -->
	<!--pages/DetailsOfRefund/DetailsOfRefund.wxml-->

	<view class="page">
		<!-- 头部状态 -->
		<view class="describe-box">
			<!-- 申请行进流程 -->
			<view class="process">
				<!-- 提交申请 -->
				<view class="current-process" v-if="returnMoneySts == 1">{{i18n.refundDetails11}}</view>
				<view class="acount-for-process" v-if="returnMoneySts == 1">{{i18n.refundDetails12}}</view>
				<view class="acount-for-process" v-if="returnMoneySts == 1">{{updateTime}}</view>
				<!-- 商家拒绝 -->
				<view class="current-process" v-if="returnMoneySts == 7">{{i18n.refundDetails71}}</view>
				<view class="acount-for-process" v-if="returnMoneySts == 7">{{i18n.refundDetails72}}</view>
				<view class="acount-for-process" v-if="returnMoneySts == 7">{{updateTime}}</view>
				<!-- 商家同意退款 -->
				<view class="current-process" v-if="returnMoneySts == 2">{{i18n.refundDetails2}}</view>
				<view class="acount-for-process" v-if="returnMoneySts == 2 && applyType == 1">{{i18n.refundDetails21}}
				</view>
				<view class="acount-for-process" v-if="returnMoneySts == 2 && applyType == 2">{{i18n.refundDetails22}}
				</view>
				<view class="acount-for-process" v-if="returnMoneySts == 2">{{updateTime}}</view>
				<!-- 寄出商品（退货退款情况下） -->
				<view class="current-process" v-if="returnMoneySts == 3">{{i18n.refundDetails31}}</view>
				<view class="acount-for-process" v-if="returnMoneySts == 3">{{i18n.refundDetails32}}</view>
				<view class="acount-for-process" v-if="returnMoneySts == 3">{{updateTime}}</view>
				<!-- 商家确认收货 -->
				<view class="current-process" v-if="returnMoneySts == 4">{{i18n.refundDetails41}}</view>
				<view class="acount-for-process" v-if="returnMoneySts == 4">{{i18n.refundDetails42}}</view>
				<view class="acount-for-process" v-if="returnMoneySts == 4">{{updateTime}}</view>
				<!-- 退款成功 -->
				<view class="current-process" v-if="returnMoneySts == 5">{{i18n.refundDetails51}}</view>
				<view class="acount-for-process" v-if="returnMoneySts == 5">{{refundTime}}</view>
				<!-- 退款申请关闭 -->
				<view class="current-process" v-if="returnMoneySts == -1">{{i18n.refundDetails_1}}</view>
				<view class="acount-for-process" v-if="returnMoneySts == -1">
					<!-- 由于你超时未处理，系统已关闭本次退款申请 -->{{rejectMessage?rejectMessage:''}}
				</view>
				<view class="acount-for-process" v-if="returnMoneySts == -1">{{updateTime}}</view>
				<!-- 买家撤回申请 -->
				<view class="current-process" v-if="returnMoneySts == 6">{{i18n.refundDetails61}}</view>
				<view class="acount-for-process" v-if="returnMoneySts == 6">{{i18n.refundDetails62}}</view>
				<view class="acount-for-process" v-if="returnMoneySts == 6">{{updateTime}}</view>


				<!-- 隐藏内容（仅退款） -->
				<view :class="showView?'display':'more-content'" v-if="returnMoneySts == 1">
					<view class="cont">{{i18n.refundDetails13}}</view>
					<view class="cont">{{i18n.refundDetails01}}</view>
					<!-- <view class="cont">如果商家逾期未处理，退款申请将自动达成并退款给你</view> -->
				</view>
				<!-- 隐藏内容（退货退款申请商品未寄出） -->
				<view :class="showView?'display':'more-content'" v-if="returnMoneySts == 2">
					<view class="cont">{{i18n.refundDetails23}}</view>
					<view class="cont">{{i18n.refundDetails01}}</view>
					<!-- <view class="cont">如果商家逾期未处理，请按照系统给出的退货地址退货</view> -->
				</view>
				<!-- 隐藏内容（退货退款并已寄出货物） -->
				<view :class="showView?'display':'more-content'" v-if="returnMoneySts == 3">
					<view class="cont">{{i18n.refundDetails33}}</view>
					<view class="cont">{{i18n.refundDetails02}}</view>
					<!-- <view class="cont">如果商家逾期未处理，系统将自动确认收货并退款给你</view> -->
				</view>

			</view>
			<!-- 申请行进流程end -->

			<!-- 更多说明 -->
			<view :class="showView?'more-instructions':'display'" @tap="onChangeShowState"
				v-if="returnMoneySts < 4 && returnMoneySts !== -1 && applyType == 2">
				<text class="more-txt">{{i18n.moreExplanation}}</text>
				<view class="down-arrow-icon">
					<image src="/static/images/icon/down-arrow.png"></image>
				</view>
			</view>
			<!-- 收起 -->
			<view :class="showView?'display':'more-instructions'" @tap="onChangeShowState"
				v-if="returnMoneySts < 4 && returnMoneySts !== -1 && applyType == 2">
				<text class="more-txt">{{i18n.putAway}}</text>
				<view class="down-arrow-icon">
					<image src="/static/images/icon/up-arrow.png"></image>
				</view>
			</view>

		</view>
		<!-- 头部状态end -->

		<!-- 【退款申请被拒绝时显示】拒绝理由 -->
		<view class="refuse-reason" v-if="returnMoneySts == 7">{{i18n.refundDetails73}}：{{rejectMessage}}</view>
		<view class="refuse-reason" v-if="sellerMsg">{{i18n.sellerRemarks}}：{{ sellerMsg }}</view>

		<!-- 【退货退款状态下，买家同意后】退货地址 -->
		<view class="return-address" v-if="returnMoneySts == 2 && applyType == 2">
			<view class="addr-tit">{{i18n.returnAddress}}</view>
			<view class="address">
				<view class="recipient">
					<text class="addr-cont">{{i18n.recipient}}：{{refundDelivery.receiverName}}</text>
					<text class="mobile">{{refundDelivery.receiverMobile}}</text>
				</view>
				<view class="addr">{{i18n.detailedAddress}}：{{refundDelivery.receiverAddr}}</view>
			</view>
		</view>

		<!-- 退款信息 -->
		<view class="refund-message">
			<view class="refund-txt">{{i18n.refundInformation}}</view>
			<view class="goods-msg-box">
				<!-- 图片 -->
				<view class="img-box" v-if="orderItems.length==1">
					<image :src="orderItems[0].pic"></image>
				</view>
				<!-- 信息 -->
				<view class="goods-text" v-if="orderItems.length==1">
					<view class="goods-title">{{orderItems[0].prodName}}</view>
					<view class="goods-quantity">{{i18n.quantity}}{{orderItems[0].prodCount}}{{i18n.piece}}</view>
				</view>

				<block v-if="orderItems.length>1">
					<view class="refund-goods-item" v-for="(item, index) in orderItems" :key="index">
						<!-- 图片 -->
						<view class="img-box">
							<image :src="item.pic"></image>
						</view>
						<!-- 信息 -->
						<view class="goods-text">
							<view class="goods-title">{{item.prodName}}</view>
							<view class="goods-quantity">{{i18n.quantity}}：{{item.prodCount}}{{i18n.piece}}</view>
						</view>
					</view>
				</block>
			</view>
			<!-- 具体信息 -->
			<view class="refund-cont">{{i18n.refundMethod}}：{{['',i18n.refund01,i18n.refund02][applyType]}}</view>
			<view class="refund-cont" v-if="buyerReason!=7">{{i18n.refundReason}}：{{refundProdReasonArray[buyerReason]}}
			</view>
			<view class="refund-cont">{{i18n.refundInstructions}}：{{buyerDesc}}</view>
			<view class="refund-cont">{{i18n.refundAmount}}：
				<text class="red" v-if="refundAmount > 0">￥{{refundAmount.toFixed(2)}}</text>
				<text class="red" v-if="refundAmount > 0 && refundScore > 0">+</text>
				<text class="red" v-if="refundScore > 0">{{refundScore}}{{i18n.integral}}</text>
			</view>
			<view class="refund-cont">{{i18n.refundNumber}}：{{refundSn}}</view>
			<view class="refund-cont">{{i18n.applicationTime}}：{{applyTime}}</view>
			<!-- 【退货申请显示】 -->
			<view class="refund-cont" v-if="goodsNum>0">{{i18n.quantityReturned}}：{{goodsNum}}</view>
		</view>


		<!-- 脚部撤销申请 -->
		<!-- applyType: 1,  //申请类型:1,仅退款,2退款退货 -->
		<!-- returnMoneySts： 处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭) -->
		<view class="foot-box">
			<view class="footer">
				<!-- 【申请后-申请完成前】 -->
				<text class="undo-apply" @tap="cancelApplication"
					v-if="returnMoneySts ==1 || returnMoneySts == 7 || (returnMoneySts ==2 && applyType == 2)">{{i18n.applicationCanceled}}</text>
				<!-- 【商家同意后-货物寄出前】 -->
				<text class="undo-apply apply-current" @tap="toLogisticsPage"
					v-if="returnMoneySts == 2 && applyType == 2" :data-refundsn="refundSn">{{i18n.fillInReturn}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	// pages/DetailsOfRefund/DetailsOfRefund.js
	var http = require("../../utils/http.js");

	export default {
		data() {
			return {
				showView: true,
				//隐藏是展示
				applyTime: '',
				//申请时间
				applyType: 1,
				//申请类型:1,仅退款,2退款退货
				goodsNum: '',
				//退货数量
				handelTime: '',
				//卖家处理时间
				orderAmount: '',
				//订单总金额
				orderItems: {},
				//订单项
				refundAmount: '',
				//退款金额
				refundDelivery: [],
				//收货地址对象
				refundId: '',
				//记录ID
				refundTime: '',
				//退款时间
				returnMoneySts: 1,
				//处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭)
				updateTime: '',
				//更新时间
				refundSn: '',
				//退款编号
				rejectMessage: '',
				//拒绝理由
				buyerReason: '',
				//退款原因
				buyerDesc: '', // 退款说明
				shopName: '', //店铺名称
				refundScore: '', // 积分
				refundProdReasonArray: [], // 退款原因
				sellerMsg: '', // 卖家备注
			};
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},

		onLoad: function(options) {
			// [拍错/多拍/不喜欢','协商一致退款','商品破损/少件','商品与描述不符','卖家发错货','质量问题','其他']
			this.refundProdReasonArray.push(this.i18n.wrongShot, this.i18n.refundConsensus, this.i18n.damagedGoods,
				this.i18n.productNot, this.i18n.sellerSendsWrong, this.i18n.qualityProblem, this.i18n.other)
			this.setData({
				refundSn: options.refundSn
			}); //获取退款申请详情

			this.getRefundDetail();
		},
		onShow: function() {
			//头部导航标题
			uni.setNavigationBarTitle({
				title: this.i18n.refundDetails
			});
		},

		methods: {
			/**
			 * 更多说明&收起
			 */
			onChangeShowState: function() {
				var that = this;
				that.setData({
					showView: !that.showView
				});
			},

			/**
			 * 获取退款申请详情
			 */
			getRefundDetail: function(e) {
				var ths = this; // wx.showLoading({})

				var params = {
					url: "/p/orderRefund/info",
					method: "GET",
					data: {
						refundSn: this.refundSn //退款编号
					},
					callBack: function(res) {
						ths.setData({
							applyTime: res.applyTime,
							//申请时间
							applyType: res.applyType,
							//申请类型:1,仅退款,2退款退货
							goodsNum: res.goodsNum,
							//退货数量
							handelTime: res.handelTime,
							//卖家处理时间
							orderAmount: res.orderAmount,
							//订单总金额
							orderItems: res.orderItems,
							//订单项
							refundSn: res.refundSn,
							//退款编号
							refundAmount: res.refundAmount,
							//退款金额
							refundDelivery: res.refundDelivery,
							//收货地址对象
							refundId: res.refundId,
							//记录ID
							refundTime: res.refundTime,
							//退款时间
							returnMoneySts: res.returnMoneySts,
							//处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭)
							updateTime: res.updateTime,
							//更新时间
							rejectMessage: res.rejectMessage,
							//拒绝理由
							buyerReason: res.buyerReason,
							//退款原因
							buyerDesc: res.buyerDesc, // 退款说明
							shopName: res.shopName,
							//积分数量
							refundScore: res.refundScore,
							sellerMsg: res.sellerMsg, // 卖家备注
						});
						uni.hideLoading();
					}
				};
				http.request(params);
			},

			/**
			 * 撤销退货退款申请
			 */
			cancelApplication: function(e) {
				uni.showModal({
					title: this.i18n.revoke,
					content: this.i18n.revokeTips,
					cancelText: this.i18n.cancel,
					confirmText: this.i18n.confirm,
					success: res => {
						if (res.confirm) {
							uni.showLoading({});
							var params = {
								url: "/p/orderRefund/cancel",
								method: "PUT",
								data: this.refundSn,
								//退款订单编号
								callBack: function(res) {
									uni.hideLoading()
									uni.redirectTo({
										url: '/pages/afterSales/afterSales'
									});
								}
							};
							http.request(params);
						} else {}
					}
				});
			},
			/**
			 * 填写物流信息
			 */
			toLogisticsPage: function(e) {
				var refundSn = e.currentTarget.dataset.refundsn;
				console.log(e.currentTarget.dataset.refundsn);
				uni.navigateTo({
					url: '/pages/writeReturnLogistics/writeReturnLogistics?refundSn=' + refundSn
				});
			}
		}
	};
</script>
<style>
	@import "./DetailsOfRefund.css";
</style>
